<!--  -->
<template>
  <div class="nav_item">
    <el-menu
      :default-active="this.$route.path" exact
      class="el-menu-vertical-demo"
      background-color="#333F4F"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <!-- 无子级 -->
      <el-menu-item :index="basePath" v-if="!item.child">
        <i class="el-icon-menu"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>

      <!-- 有子级 -->
      <el-submenu :index="basePath" v-else>
        <template slot="title">
          <i class="el-icon-document"></i>
          {{ item.name }}
        </template>
        <NavItem
          v-for="sub in item.child"
          :key="sub.url"
          :item="sub"
          :basePath="sub.url"
        ></NavItem>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavItem",
  props: ["item", "basePath"],
};
</script>

<style scoped>
.el-menu-item{
    text-align: left;
}
.el-submenu{
    text-align: left;
}


</style>